<template>
  <div class="fan_bigBox">
    <signTitle :xxTitle="fanTitle"></signTitle>
    <!-- v-for   -->
    <div class="fan_box">
      <!-- 单个 -->
      <div class="fan_infoBox" @click="toPersonInfo(index)"  v-for="(item1, index) in fanBOX" :key="index">
        <div class="fanPic" >
          <img :src="pic" style="width: 200%; height: 200%" alt="" />
        </div>
        <div class="fanName">{{ item1.username }}</div>
        <div class="fan_otherDate">
          <div class="fanDate">
            粉丝&nbsp;<span>{{ item1.fans }}</span>
          </div>
          <div class="concernDate">
            关注&nbsp;<span>{{ item1.stars }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import signTitle from "./title1.vue";
export default {
  name: "",
  components: {
    signTitle,
  },
  props: {
    fanBOX: Array,
  },
  data() {
    return {
      pic: require("../../assets/microphone-boy-studio-screaming-preview.jpg"),
      fanTitle: [
        {
          sign: require("../../assets/粉丝.png"),
          who: "TA的粉丝",
        },
      ],
    };
  },
  methods:{
    toPersonInfo(index){
      this.$parent.ID = this.fanBOX[index].id;
      this.$parent.infoFlag =1;
    }
  }
};
</script>
<style scoped>
.fan_box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 1200px;
  height: 200px;
}
.fan_box >div{
  margin-left: 20px;
}
.fan_infoBox {
  width: 150px;
  height: 157px;
  display: flex;
  flex-direction: column;
  align-items: center; /**为什么 */
  margin: 0 0 20px 0;
  background: #21262c;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.82);
  border-radius: 5px;
  transition: all 0.3s;
}
.fan_infoBox:hover{
  cursor: pointer;
  transform: scale(1.02);
}
.fanPic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-top: 12px;
  overflow: hidden;
}
.fanName {
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  margin: 5px 0;
  /* line-height: 64px; */
}
.fan_otherDate {
  display: flex;
  letter-spacing: 1px;
}
.fanDate {
  margin-right: 8px;
}
.concernDate,
.fanDate {
  font-size: 14px;
  font-family: Impact;
  font-weight: 400;
  color: #ffffff;
  /* line-height: 66px; */
}
</style>
